<template>
<view class='uni-icon' :style='style' />
</template>

<script setup lang="ts">
  import { IconProps } from '../props'
  import { useIconfont } from '../useIconfont'
  import { computed } from 'vue'
  const props = defineProps(IconProps)
  const {
  colors,
  svgSize,
  quot,
  isStr,
  } = useIconfont(props)
  const style = computed(() => {
      return `background-image: url(${quot.value}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize.value}px' height='${svgSize.value}px'%3E%3Cpath d='M358.1 78.8H192.8c-67.8 0-122.9 55.1-122.9 122.9V367c0 67.8 55.1 122.9 122.9 122.9h165.3c67.8 0 122.9-55.1 122.9-122.9V201.7c0-67.8-55.1-122.9-122.9-122.9zM358.1 534.2H192.8c-67.8 0-122.9 55.1-122.9 122.9v165.3c0 67.8 55.1 122.9 122.9 122.9h165.3c67.8 0 122.9-55.1 122.9-122.9V657c0-67.7-55.1-122.8-122.9-122.8zM942.6 860.2L899.2 824c13.8-27 21.6-57.6 21.6-90 0-109.5-89.1-198.5-198.5-198.5S523.8 624.6 523.8 734c0 109.5 89.1 198.5 198.5 198.5 54.1 0 103.1-21.7 139-56.9l40.3 33.7c6 5 13.3 7.4 20.5 7.4 9.2 0 18.2-3.9 24.6-11.5 11.2-13.5 9.4-33.6-4.1-45z m-220.3 8.4c-74.2 0-134.5-60.4-134.5-134.5s60.4-134.5 134.5-134.5S856.8 660 856.8 734.1s-60.3 134.5-134.5 134.5zM646.1 489.8h165.3c67.8 0 122.9-55.1 122.9-122.9V201.7c0-67.8-55.1-122.9-122.9-122.9H646.1c-67.8 0-122.9 55.1-122.9 122.9V367c0 67.7 55.1 122.8 122.9 122.8z' fill='${(isStr.value ? colors.value : colors.value[0]) || 'rgb(51,51,51)'}' /%3E%3C/svg%3E${quot.value}); width: ${svgSize.value}px; height: ${svgSize.value}px;`
  })
</script>
